<template>
  <el-row class="webchat_domain_update">
    <el-col :span="10">
      <el-form ref="domainUpdate" :model="fromData">
        <el-form-item label="域名标题">
          <el-input v-model.trim="fromData.title" placeholder="请输入" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="域名（URL）">
          <el-input v-model.trim="fromData.domain" placeholder="请输入" size="mini">
            <template slot="prepend">Https://</template>
          </el-input>
          <div class="prompt"><span class="prompt">温馨提示：域名格式为Https开头，并且以小写英文或数字和点组成</span></div>
        </el-form-item>
        <div>
          <el-button type="primary" @click="save" class="primary_btn">保存</el-button>
          <el-button @click="cancel" class="primary_btn">取消</el-button>
        </div>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
  export default {
    name: 'webDomainUpdate',
    data () {
      return {
        fromData: {}
      }
    },
    methods: {
      save () {
        if (!this.fromData.title) {
          this.$message.error('输入域名标题')
          return
        }
        var regex = new RegExp(/^(?=^.{3,255}$)[a-z0-9][-a-z0-9]{0,62}(\.[a-z0-9][-a-z0-9]{0,62})+$/)
        var url = this.fromData.domain
        if (!regex.test(url)) {
          this.$message.error('请检查您的域名')
          return
        }
        var action = 'addDomain'
        if (this.fromData._id) {
          action = 'updateDomain'
        }
        this.$store.dispatch(action, this.fromData).then(res => {
          if (res && res.success) {
            if (action === 'addDomain') {
              this.$message.success('添加成功')
            } else {
              this.$message.success('更新成功')
            }
            this.fromData = {}
            this.$emit('back')
          }
        })
      },
      cancel () {
        this.fromData = {}
        this.$emit('back')
      }
    },
    props: {
      domainData: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    watch: {
      domainData () {
        this.fromData = this.domainData
      }
    },
    beforeMount () {
      this.fromData = this.domainData
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .webchat_domain_update
    padding 10px
    box-sizing border-box
  .prompt
    color $c-prompt
    line-height normal
    font-size 12px
</style>